<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example95</title>
  

  <script src="../../../angular.min.js"></script>
  

  
</head>
<body ng-app="transcludeFallbackContentExample">
  <script>
angular.module('transcludeFallbackContentExample', [])
.directive('myButton', function(){
            return {
              restrict: 'E',
              transclude: true,
              scope: true,
              template: '<button style="cursor: pointer;">' +
                          '<ng-transclude>' +
                            '<b style="color: red;">Button1</b>' +
                          '</ng-transclude>' +
                        '</button>'
            };
        });
</script>
<!-- fallback button content -->
<my-button id="fallback"></my-button>
<!-- modified button content -->
<my-button id="modified">
  <i style="color: green;">Button2</i>
</my-button>
</body>
</html>